<template>
<div class='editable-cell'>
  <div v-if="editable" class='editable-cell-input-wrapper'>
    <el-input
      size="mini"
      :value="editValue"
      @change="handleChange"
      @keyup.native.enter="check"
    />
    <i class="el-icon-close editable-cell-icon-cancel" @click="cancel"></i>
    <i class="el-icon-check editable-cell-icon-check" @click="check"></i>
  </div>
  <div v-else class='editable-cell-text-wrapper'>
    {{value || ' '}}
    <i class="el-icon-edit editable-cell-icon" @click="edit"></i>
  </div>
</div>
</template>
<script>
export default {
  props: {
    text: String,
  },
  data () {
    return {
      editValue: this.text,
      value: this.text,
      editable: false,
    }
  },
  methods: {
    handleChange (value) {
      this.editValue = value
    },
    cancel () {
      this.editable = false
      this.editValue = this.value
    },
    check () {
      this.editable = false
      this.value = this.editValue
      this.$emit('change', this.value)
    },
    edit () {
      this.editable = true
    },
  },
}
</script>
<style scoped>
  @import '../editable-cell.css';
</style>